<template>
  <el-card>
    <div slot="header">
      <slot name="page-header"></slot>
    </div>
    <div class="page-body">
      <el-form class="form-wrap" :label-width="labelWidth">
        <div v-for="item in formItems" :key="item.prop" class="form-row-wrap">
          <el-form-item :style="`width:${formItemWidth}`">
            <el-row type="flex" justify="end" slot="label" :style="`width: ${labelWidth}`">
              <div v-if="hasChangeVal(item)">
                <el-tag type="warning">有修改</el-tag>
                <el-divider direction="vertical" />
              </div>
              <div class="form-item-label">{{ `${item.label}：` }}</div>
            </el-row>
            <template v-if="item.type === 'textarea'">
              <el-input
                v-model="dataSource[item.prop]"
                type="textarea"
                show-word-limit
                :maxlength="item.maxlength || 100"
                :rows="item.rows || 2"
                :placeholder="`请输入${item.label}`"
              />
            </template>
            <template v-else-if="item.type === 'radio'">
              <el-radio-group v-model="dataSource[item.prop]" disabled>
                <el-radio
                  v-for="opt in item.options"
                  :key="opt.value"
                  :label="opt.value"
                >{{ opt.label }}
                </el-radio>
              </el-radio-group>
            </template>
            <template v-else-if="item.type === 'image'">
              <template v-if="hasChangeVal(item)">
                <el-row type="flex">
                  <div v-if="getOriginalVal(item)" class="original-img">
                    <el-image
                      class="image-wrap"
                      :src="getOriginalVal(item)"
                      :preview-src-list="[getOriginalVal(item), getPresentVal(item)]"
                    />
                    <p>原图</p>
                  </div>
                  <div v-if="getPresentVal(item)" class="present-img">
                    <el-image
                      class="image-wrap"
                      :src="getPresentVal(item)"
                      :preview-src-list="[getOriginalVal(item), getPresentVal(item)]"
                    />
                    <p>现图</p>
                  </div>
                </el-row>
              </template>
              <template v-else>
                <el-image
                  v-if="getPresentVal(item)"
                  class="image-wrap"
                  :src="getPresentVal(item)"
                  :preview-src-list="[getPresentVal(item)]"
                />
              </template>
            </template>
            <template v-else-if="item.slotName">
              <slot :name="item.slotName" />
            </template>
            <template v-else>
              <template v-if="hasChangeVal(item)">
                <el-row type="flex" class="edit-tag-wrap">
                  <TagTooltip
                    isTag
                    class="show-tag"
                    :style="`maxWidth: ${tagMaxWidth}`"
                    :textContent="getOriginalVal(item)"
                  >
                    <template slot="label-tag">原值：</template>
                  </TagTooltip>
                  <TagTooltip
                    isTag
                    class="show-tag"
                    :style="`maxWidth: ${tagMaxWidth}`"
                    :textContent="getPresentVal(item)"
                  >
                    <span slot="label-tag">现值：</span>
                  </TagTooltip>
                </el-row>
              </template>
              <template v-else>
                <TagTooltip class="show-content" :textContent="getPresentVal(item)" />
              </template>
            </template>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div v-if="isAuditPage" :style="`marginLeft: ${labelWidth}`">
      <slot name="page-footer">
        <el-row type="flex">
          <el-button @click="handleGoBack">返回</el-button>
          <el-button :loading="btnLoading.fail" @click="handleAuditFailed">审核不通过</el-button>
          <el-button type="primary" :loading="btnLoading.success" @click="handleAuditSuccessed">审核通过</el-button>
        </el-row>
      </slot>
    </div>
  </el-card>
</template>
<script>
import ElImage from 'element-ui/packages/image';
import TagTooltip from './TagTooltip';
import { getEchoByOptions } from '@/utils/getUtils';
export default {
  components: { ElImage, TagTooltip },
  props: {
    formItems: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    labelWidth: {
      type: String,
      default: '200px'
    },
    handleFail: {
      type: Function,
      default: () => {}
    },
    handleSuccess: {
      type: Function,
      default: () => {}
    },
    // 当前是否是审核页面
    isAuditPage: {
      type: Boolean,
      default: false
    },
    // tag展示文本的宽度
    tagMaxWidth: {
      type: String,
      default: '200px'
    },
    // form-item的宽度
    formItemWidth: {
      type: String,
      default: '60%'
    }
  },
  data () {
    return {
      dataSource: {},
      btnLoading: {
        fail: false,
        success: false
      }
    }
  },
  watch: {
    formData (val) {
      this.dataSource = val
    }
  },
  methods: {
    // 值是否有变更历史
    hasChangeVal (item) {
      if (!this.dataSource?.diffMap) return false
      const hasChanged = this.dataSource.diffMap[item.prop]
      return hasChanged
    },
    // 获取图片url
    getImgUrl (src) {
      if (!src) return null
      const hostReg = /^(http|https):\/\//
      if (hostReg.test(src)) return src
      return `${this.IMAGEURL}${src}?${this.XOSSPROCE}`
    },
    // 获取原值
    getOriginalVal (item) {
      const { oldValue } = this.dataSource.diffMap[item.prop] ?? {}
      return this.getActualShowVal(item, oldValue)
    },
    // 获取现值
    getPresentVal (item) {
      const newValue = this.dataSource[item.prop]
      return this.getActualShowVal(item, newValue)
    },
    // 获取实际展示值
    getActualShowVal (item, val) {
      if (item.type === 'image') return this.getImgUrl(val)
      let showStr = val
      if (item.options && Array.isArray(val)) {
        showStr = item.options
          .filter(item => val.includes(item.value))
          .map(item => item.label)
          .join(',')
      }
      if (item.options && !Array.isArray(val)) {
        showStr = getEchoByOptions(val, item.options)
      }
      return (item?.prefix ?? '') + (showStr ?? '') + (item?.suffix ?? '')
    },
    // 返回
    handleGoBack () {
      this.$emit('goback')
    },
    // 审核不通过
    handleAuditFailed () {
      if (!this.dataSource.reason) return this.$message.warning('审核原因不能为空！')
      const loadingFn = state => { this.btnLoading.fail = state }
      const messageFn = () => { this.$message.success('操作成功') }
      this.handleFail(loadingFn, messageFn, this.dataSource)
    },
    // 审核通过
    handleAuditSuccessed () {
      const loadingFn = state => { this.btnLoading.success = state }
      const messageFn = () => { this.$message.success('操作成功') }
      this.handleSuccess(loadingFn, messageFn, this.dataSource)
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-form-item {
  margin-bottom: 10px;
}
.edit-tag-wrap {
  :nth-child(2) {
    margin-left: 10px;
  }
}
.hidden {
  visibility: hidden;
}
.form-item-wrap {
  width: 60%;
}
.form-row-wrap {
  display: flex;
}
.form-item-label {
  margin-right: 5px;
}
.original-img, .present-img {
  p {
    text-align: center;
    color: #85888e;
    font-size: 13px;
  }
}
.present-img {
  margin-left: 20px;
}
.show-tag {
  margin-top: 4px;
}
.show-content {
  max-width: 100%;
}
.show-tag, .show-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-wrap {
  width: 120px;
  height: 120px;
  border: 0.5px solid #eee;
}
</style>
